<template>
 <div class="linkage">
    <a-table :row-selection="rowSelection" :rowKey="id" style="display:inline-block;" :customRow="customRow" :style="{width:pixel}" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="columns" :dataSource="treeData">
        <a slot="name" slot-scope="text">
          {{text.name}}
          <span style="float:right;"><a-icon type="right" /></span>
        </a>
    </a-table>
    <div v-show="sontable" style="display:inline-block;">
        <a-table :row-selection="sonrowSelection" :rowKey="id" :customRow="customRow" style="display:inline-block;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="soncolumns" :dataSource="sontreeData">
            <a slot="name" slot-scope="text">{{ text }}</a>
        </a-table>
    </div>
 </div>

</template>
<script>
import {CITYGET} from '@/services/api'
import {ajaxparems} from '@/services/ajaxrequest'
const columns = [
  {
    title: '省份',
    // dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
];

const soncolumns = [
  {
    title: '城市',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
];

const grandcolumns = [
  {
    title: '城市',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
];

export default {
  name: 'linkage',
   props: {
    treeData:Array,
   },
  data() {
    return {
        pixel:'500px',
        columns,
		soncolumns,
		grandcolumns,
        pages:false,
		sontable:false,
		grandtable:false,
		sontreeData:[],
		grandtreeData:[],
//       expandedKeys: ['0-0-0', '0-0-1'],
//       autoExpandParent: true,
//       checkedKeys: ['0-0-1'],
//       selectedKeys: [],
      
    };
  },
  methods:{
    customRow(record, index) {
      return {
        on: {
          click: () => {
            console.log(record, index)
                this.selectedRowKeys = [record.id]
                this.selectedRows = [record]
                console.log(this.selectedRows)
          }
        }
      }
    },
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
            var count = this.treeData.length;
             if(selectedRows.length !=0){
                var arr = selectedRows.reverse(); 
                if(count != selectedRows.length){
                  this.sontable = true;
                  this.pixel = '180px';
                  this.soncolumns[0].title = arr[0].name
                    var cityparems = {"parent_id":arr[0].id};
                    ajaxparems(CITYGET,cityparems).then((res) => {
                        var result = res.data;
                        this.sontreeData = result.data
                    });
                }else{
                    this.sontable = false;
                    this.pixel = '500px';
                }
             }else{
				this.grandtable = false;
                this.sontable = false;
                this.pixel = '500px'; 
             }
        },
      };
    },
    sonrowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
			var count = this.sontreeData.length;
             if(selectedRows.length !=0){
				  var arr = selectedRows.reverse(); 
				  if(count != selectedRowKeys.length){
					  	this.grandtable = true;
					   	this.grandcolumns[0].title = arr[0].name
						var cityparems = {"parent_id":arr[0].id};
						ajaxparems(CITYGET,cityparems).then((res) => {
							var result = res.data;
							this.grandtreeData = result.data
						});
				  }else{
					  	this.grandtable = false;
				  }
             }
        },
      };
    },
  },
};
</script>